<template>
  <div class="container">
    <div class="air_form_title">
      <div
        v-for="(item ,index ) in titles"
        :key="index"
        :class="['air_form_title_item',index===titlesIndex?'active':'']"
        @click="titlesIndex=index"
      >
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </div>
    </div>
    <div class="air_form_content">
      <span
        class="huan"
        @click="changeCity"
      >换</span>
      <div class="air_form_inp_item">
        <label for="">出发城市</label>
        <el-autocomplete
          class="air_form_input"
          placeholder="请输入出发城市"
          v-model="form.departCity"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          @select="handleSelect1"
        ></el-autocomplete>
      </div>

      <div class="air_form_inp_item">
        <label for="">到达城市</label>
        <el-autocomplete
          class="air_form_input"
          placeholder="请输入到达城市"
          v-model="form.destCity"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          @select="handleSelect2"
        ></el-autocomplete>
      </div>
      <div class="air_form_inp_item">
        <label for="">出发时间</label>
        <el-date-picker
          type="date"
          class="air_form_input"
          placeholder="选择日期"
          v-model="form.departDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="air_form_inp_item air_form_inp_item_btn  ">
        <el-button
          class="air_form_input"
          icon="el-icon-search"
          type="primary"
          @click="submitSearch"
        >搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titles: [
        {
          name: "单程",
          icon: "iconfont icondancheng",
        },
        {
          name: "往返",
          icon: "iconfont iconshuangxiang",
        },
      ],
      titlesIndex: 0,
      form: {
        // 出发城市
        departCity: "",
        // 出发城市的代码
        departCode: "",
        // 目的城市
        destCity: "",
        // 目的城市的代码
        destCode: "",
        // 出发日期
        departDate: "",
      },
      // 日期选择框的配置对象
      pickerOptions: {
        disabledDate(date) {
          /* 
          返回 true 禁用  
          返回 false 启用

          1 date 日历组件上所有 日子  
            8月1号 8月2号   8月26号 8月27号.. 9月30号 .....
          
          2 Date.now() 当下的时间 时间戳 

          3 在 8月28号 之前的  日子 都要禁用掉!!   时间戳  都要返回true
           */

          // 声明 日历上的时间戳
          const caTime = date.getTime();

          // return   8月1号 <  当下的时间

          // 8月28号 01:00    日历上的时间 caTime

          //  caTime + 一天    8月29号 01:00  <   8月28号 00:01  不满足 就返回false 启用

          // 8月28号 00:01   当下世间
          // 返回true 就禁用

          return caTime + 86400000 < Date.now();
        },
      },
    };
  },
  methods: {
    // 出发城市 输入城市名称后会触发的事件
    querySearchAsync(queryString, cb) {
      this.$axios
        .get("/airs/city", {
          params: {
            name: queryString,
          },
        })
        .then((res) => {
          const list = res.data.data.map((v) => ({
            ...v,
            value: v.name.replace("市", ""),
          }));
          cb(list);
        });
    },
    // 点击 出发城市中的选项后
    handleSelect1(item) {
      // console.log(item);
      this.form.departCode = item.sort;
    },
    // 点击到达城市 选项
    handleSelect2(item) {
      this.form.destCode = item.sort;
    },
    // 点击换 事件
    changeCity() {
      // 交换城市 有城市名称和城市代码

      // low B 写法
      // const { departCity, departCode, destCity, destCode } = this.form;
      // this.form.departCity=destCity;
      // this.form.departCode=destCode;
      // this.form.destCity=departCity;
      // this.form.destCode=departCode;

      [
        this.form.departCity,
        this.form.departCode,
        this.form.destCity,
        this.form.destCode,
      ] = [
        this.form.destCity,
        this.form.destCode,
        this.form.departCity,
        this.form.departCode,
      ];
    },
    // 点击搜索按钮
    submitSearch() {
      /* 
      1 获取表单的值
      2 按个校验合法性
      3 不通过 就弹窗提示用户
      4 通过 再跳转页面到机票列表
       */

      //  departCity: "",
      //         // 出发城市的代码
      //         departCode: "",
      //         // 目的城市
      //         destCity: "",
      //         // 目的城市的代码
      //         destCode: "",
      //         // 出发日期
      //         departDate: ""

      const data = {
        departCity: {
          value: this.form.departCity,
          msg: "请输入出发城市",
        },
        departCode: {
          value: this.form.departCode,
          msg: "请输入出发城市",
        },
        destCity: {
          value: this.form.destCity,
          msg: "请输入到达城市",
        },
        destCode: {
          value: this.form.destCity,
          msg: "请输入到达城市",
        },
        departDate: {
          value: this.form.departDate,
          msg: "请选择日期",
        },
      };

      // 遍历这个对象data  某个字段不合法就弹出提示
      // 对象 forin  low
      const isOk = Object.values(data).every((v) => {
        if (v.value) {
          return true;
        } else {
          this.$message.error(v.msg);
          return false;
        }
      });

      if (isOk) {
        console.log("通过校验");

        // flights?departCity=%E5%B9%BF%E5%B7%9E%E5%B8%82&departCode=CAN&destCity=%E5%8C%97%E4%BA%AC%E5%B8%82&destCode=BJS&departDate=2020-08-29

        // 搜索数据 存放到vuex中 -> 数据存放到h5 localstorage

        // 只存放  机票信息数据   深拷贝来处理 !! 
        const { departCity, destCity, departDate,departCode,destCode } = this.form;

        this.$store.commit("air/push", { departCity, destCity, departDate,departCode,destCode  });

        this.$router.push({
          path: "/air/flights",
          query: this.form
        });
      } else {
        console.log("没有通过");
      }
    },
  },
};
</script>

<style lang="less" scoped >
.container {
  width: 100%;
  border: 1px solid #ccc;
  height: 350px;
}
.air_form_title {
  height: 50px;
  display: flex;
  .air_form_title_item {
    // 子项 高度 默认等于父项的高度
    background-color: #eeeeee;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      background-color: #fff;
      position: relative;
      // border-top: 5px solid #ffa500;
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #ffa500;
        top: 0;
        left: 0;
      }
    }
    span {
      margin-left: 5px;
    }
  }
}

.air_form_content {
  padding: 12px 50px 0 30px;
  position: relative;
  .huan {
    background-color: #999999;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 14px;
    top: 50px;
    font-size: 12px;
    &::before {
      width: 26px;
      height: 60px;
      content: "";
      border: 1px solid #ccc;
      border-left: none;
      position: absolute;
      left: -16px;
      top: -20px;
      z-index: -1;
    }
  }
  .air_form_inp_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    label {
      color: #666;
      font-size: 12px;
    }
    .air_form_input {
      width: 210px;
    }
  }
  .air_form_inp_item_btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>